# 提交需求页 - TAPD需求文档

需求背景（补充业务场景与触发原因）：

客户在提交需求时，需要填写完整的需求信息，包括公司信息、需求类型、需求描述、预算范围等，以便顾问能够准确理解客户需求并进行后续的评估和报价。目前客户提交需求的方式缺乏统一规范，信息收集不完整，导致后续评估和沟通效率低下。需要一个标准化的需求提交页面，引导客户填写完整的需求信息，提升需求收集质量和后续处理效率。



需求价值（补充对业务的价值）：

1. **规范需求收集**：通过标准化的表单字段，确保客户提交的需求信息完整、规范，减少因信息缺失导致的沟通成本。
2. **提升评估效率**：通过结构化的需求信息（需求类型、预算范围等），帮助顾问快速理解需求，提高需求评估和报价效率。
3. **优化客户体验**：通过友好的交互设计（公司搜索、文件上传等），降低客户提交需求的门槛，提升客户满意度。
4. **支持业务分析**：通过收集需求类型、预算范围等结构化数据，支持后续的业务数据分析和决策。
5. **建立业务闭环**：作为需求提交的入口，为后续的需求跟踪、报价、协议签署等流程提供数据基础。



需求目标（说明该需求要解决的问题或达成的目标）：

1. **提供标准化的需求提交入口**：作为客户提交需求的主要入口，提供统一的需求信息收集界面。
2. **确保需求信息完整性**：通过必填项校验和引导，确保客户提交的需求信息完整，包含必要的业务信息。
3. **简化需求提交流程**：通过友好的交互设计（公司搜索、文件上传等），降低客户填写表单的复杂度，提升提交效率。
4. **支持附件上传**：允许客户上传相关文档和图片，提供更丰富的需求信息，帮助顾问更好地理解需求。
5. **数据规范化**：通过下拉选择、单选等方式，确保需求类型、预算范围等关键信息的格式统一，便于后续处理和分析。



用户故事（不同的视角下，希望的结果）：

**作为客户，我希望：**
- 能够快速选择我所在的公司名称，如果公司不在列表中，能够通过搜索快速找到。
- 能够选择需求类型，明确表达我的需求类别，帮助顾问更好地理解需求。
- 能够填写需求标题和详细描述，充分表达我的业务需求和场景。
- 能够选择预算范围，让顾问了解我的预算情况，便于后续报价。
- 能够上传相关的文档和图片，提供更详细的需求信息，帮助顾问更好地理解需求。
- 提交需求后能够快速跳转到需求详情页，查看我提交的需求信息。

**作为顾问，我希望：**
- 客户提交的需求信息完整，包含公司信息、需求类型、需求描述等关键信息，便于我快速理解需求。
- 需求类型和预算范围等信息格式统一，便于我进行分类和评估。
- 客户能够上传相关附件，提供更丰富的需求信息，帮助我更好地评估需求。
- 需求提交后能够自动创建需求记录，我可以在后台查看和处理。

**作为产品经理，我希望：**
- 需求提交页面能够引导客户填写完整信息，减少因信息缺失导致的沟通成本。
- 通过结构化的数据收集，支持后续的数据分析和业务决策。
- 需求提交流程简单顺畅，降低客户提交门槛，提高需求收集效率。



需求描述（详细阐述需求的行为逻辑、交互流程或后台规则）：

**1. 页面布局结构**
- 包含以下主要区域（从上到下）：
  - 顶部标题栏（固定顶部，包含返回按钮和"提交需求"标题）
  - 表单内容区域（可滚动）
  - 底部提交按钮（固定底部）

**2. 公司名称选择**
相关说明：第一版本可以直接让用户填写，后续再实现公司的搜索功能。
- **显示方式**：输入框形式，只读状态，点击后弹出选择弹窗
- **弹窗交互**：
  - 弹窗显示时，背景半透明遮罩（rgba(0,0,0,0.2)）
  - 弹窗包含标题"选择公司名称"、搜索输入框、公司列表、取消按钮
  - 搜索输入框支持实时搜索，输入关键词后自动过滤公司列表
  - 公司列表支持滚动，点击公司名称后自动填充到输入框并关闭弹窗
  - 点击取消按钮或弹窗外部区域关闭弹窗
- **数据来源**：从公司表（companies）或用户关联的公司信息获取公司列表
- **搜索逻辑**：支持模糊匹配，不区分大小写，匹配公司名称中包含关键词的公司

**3. 需求类型选择**
- **显示方式**：下拉选择框（select），必填项
- **选项内容**：
  - 企业服务
  - 管理咨询
  - AI+RPA
  - 流程自动化
  - 数字化转型
- **默认值**：空（显示"请选择需求类型"）
- **校验规则**：提交时必须选择，未选择时提示"请选择需求类型"

**4. 需求标题输入**
- **显示方式**：单行文本输入框，必填项
- **占位符**：请输入需求标题
- **校验规则**：
  - 提交时不能为空，为空时提示"请输入需求标题"
  - 建议限制最大长度（如100字符）

**5. 需求描述输入**
- **显示方式**：多行文本输入框（textarea），必填项
- **占位符**：详细描述业务场景, 需协同APP
- **最小高度**：120px，支持垂直调整大小
- **校验规则**：
  - 提交时不能为空，为空时提示"请输入需求描述"
  - 建议限制最大长度（如2000字符）

**6. 预算范围选择**
- **显示方式**：三个单选按钮横向排列，非必填项
- **选项内容**：
  - 1k-5k
  - 5k-10k
  - 10k+
- **交互逻辑**：
  - 点击选项后，该选项高亮显示（边框和背景色变化）
  - 同时只能选择一个选项
  - 可以取消选择（再次点击已选中的选项）
- **样式反馈**：选中状态时，边框颜色变为主题色（#6366f1），背景色变为浅色（#eef2ff）

**7. 附件上传功能**
相关说明：第一版本可以直接让用户上传,如果比较费时间，可以先不开发。
- **显示方式**：上传区域（虚线边框，点击上传）+ 预览区域（网格布局）
- **上传限制**：
  - 最多上传9个文件
  - 支持的文件类型：图片（image/*）、PDF、Word（.doc, .docx）、Excel（.xls, .xlsx）
- **交互逻辑**：
  - 点击上传区域，触发文件选择对话框
  - 支持多选文件
  - 如果已上传文件数量 + 新选择文件数量 > 9，提示"最多只能上传9个文件，当前已有X个，还可以上传Y个"
  - 文件选择后，自动显示预览：
    - 图片文件：显示缩略图预览
    - 其他文件：显示文件图标和文件名（文件名过长时截断显示）
  - 每个预览项右上角有删除按钮，点击可删除该文件
  - 删除后，文件从上传列表中移除
- **预览布局**：3列网格布局，每个预览项为正方形（aspect-ratio: 1）

**8. 提交按钮**
- **显示位置**：固定底部，安全区域适配（iPhone X等设备）
- **按钮样式**：主题色背景（#6366f1），白色文字，圆角按钮
- **交互逻辑**：
  - 点击后执行表单校验
  - 校验通过后，收集所有表单数据（包括上传的文件）
  - 提交数据到后端接口，创建需求记录
  - 提交成功后，跳转到需求详情页（customer-requirement-detail.html）
- **点击反馈**：按下时有缩放效果和背景色变化

**9. 表单校验规则**
- **必填项校验**：
  - 需求类型：必须选择
  - 需求标题：不能为空
  - 需求描述：不能为空
- **校验时机**：点击提交按钮时进行校验
- **校验反馈**：校验失败时，提示具体错误信息，并聚焦到对应输入框

**10. 数据提交规则**
- **提交数据结构**：
  - company_name: 公司名称（字符串）
  - requirement_type: 需求类型（字符串，对应选项值）
  - title: 需求标题（字符串）
  - description: 需求描述（字符串）
  - budget: 预算范围（字符串，可选，对应选项值）
  - files: 附件列表（数组，包含文件信息：name, size, type）
- **文件上传**：
  - 文件需要先上传到文件服务器，获取文件URL
  - 提交需求时，将文件URL列表一并提交
  - 或者使用FormData方式，将文件和表单数据一起提交
- **后端处理**：
  - 创建需求记录，保存到需求表（requirements）
  - 关联当前登录用户
  - 关联公司信息（如果公司不存在，可能需要创建公司记录）
  - 保存附件信息到附件表（attachments）或需求表的附件字段
  - 设置需求初始状态为"待处理"

**11. 异常处理**
- **网络错误**：提交失败时，显示友好的错误提示，允许重试
- **文件上传失败**：单个文件上传失败时，提示具体文件上传失败，不影响其他文件
- **数据校验失败**：显示具体的校验错误信息，引导用户修正
- **页面跳转失败**：如果目标页面不存在，显示错误提示

**12. 交互优化**
- **输入框聚焦**：聚焦时边框颜色变化，显示聚焦状态
- **按钮点击反馈**：所有可点击元素都有点击反馈效果（缩放、透明度变化）
- **加载状态**：提交时显示加载状态，防止重复提交
- **滚动优化**：表单内容区域支持滚动，底部按钮固定不遮挡内容



验收标准（列出明确、可验证的交付标准）：

**1. 页面布局验收**
- [ ] 顶部标题栏固定显示，包含返回按钮和"提交需求"标题
- [ ] 表单内容区域支持滚动，底部提交按钮固定显示
- [ ] 底部按钮支持安全区域适配（iPhone X等设备）

**2. 公司名称选择验收**
- [ ] 输入框只读，点击后弹出选择弹窗
- [ ] 弹窗显示公司列表，支持滚动查看
- [ ] 搜索功能正常，输入关键词后实时过滤公司列表
- [ ] 点击公司名称后，正确填充到输入框并关闭弹窗
- [ ] 点击取消或弹窗外部区域，正确关闭弹窗
- [ ] 公司列表数据从后端正确获取

**3. 需求类型选择验收**
- [ ] 下拉选择框显示所有选项（企业服务、管理咨询、AI+RPA、流程自动化、数字化转型）
- [ ] 默认显示"请选择需求类型"
- [ ] 选择后正确更新显示
- [ ] 提交时未选择，正确提示"请选择需求类型"

**4. 需求标题输入验收**
- [ ] 输入框正常显示，占位符正确
- [ ] 支持正常输入和编辑
- [ ] 提交时为空，正确提示"请输入需求标题"
- [ ] 输入框聚焦时，边框颜色正确变化

**5. 需求描述输入验收**
- [ ] 文本域正常显示，占位符正确
- [ ] 支持多行输入和编辑
- [ ] 支持垂直调整大小
- [ ] 提交时为空，正确提示"请输入需求描述"
- [ ] 文本域聚焦时，边框颜色正确变化

**6. 预算范围选择验收**
- [ ] 三个选项正确显示（1k-5k、5k-10k、10k+）
- [ ] 点击选项后，正确高亮显示
- [ ] 同时只能选择一个选项
- [ ] 可以取消选择（再次点击已选中的选项）
- [ ] 选中状态样式正确（边框和背景色变化）

**7. 附件上传验收**
- [ ] 上传区域正常显示，点击后触发文件选择对话框
- [ ] 支持多选文件
- [ ] 文件类型限制正确（图片、PDF、Word、Excel）
- [ ] 最多上传9个文件的限制正确执行
- [ ] 超过9个文件时，正确提示错误信息
- [ ] 图片文件正确显示缩略图预览
- [ ] 其他文件正确显示文件图标和文件名
- [ ] 删除按钮功能正常，点击后正确删除文件
- [ ] 预览布局为3列网格，每个预览项为正方形

**8. 提交按钮验收**
- [ ] 按钮固定底部显示，样式正确
- [ ] 点击后执行表单校验
- [ ] 校验失败时，正确提示错误信息并聚焦到对应输入框
- [ ] 校验通过后，正确收集所有表单数据
- [ ] 提交时显示加载状态，防止重复提交
- [ ] 提交成功后，正确跳转到需求详情页
- [ ] 提交失败时，正确显示错误提示

**9. 数据提交验收**
- [ ] 提交的数据结构正确，包含所有字段
- [ ] 文件正确上传到服务器，获取文件URL
- [ ] 后端正确创建需求记录，保存到数据库
- [ ] 需求记录正确关联当前登录用户
- [ ] 需求记录正确关联公司信息
- [ ] 附件信息正确保存
- [ ] 需求初始状态正确设置为"待处理"

**10. 异常处理验收**
- [ ] 网络错误时，正确显示错误提示，支持重试
- [ ] 文件上传失败时，正确提示具体错误信息
- [ ] 数据校验失败时，正确显示具体错误信息
- [ ] 页面跳转失败时，正确显示错误提示

**11. 交互体验验收**
- [ ] 所有输入框聚焦时，边框颜色正确变化
- [ ] 所有可点击元素都有点击反馈效果
- [ ] 页面滚动流畅，无卡顿现象
- [ ] 弹窗交互流畅，无闪烁或布局跳动

**12. 数据准确性验收**
- [ ] 公司列表数据从数据库正确获取
- [ ] 需求类型选项与后端定义一致
- [ ] 提交的数据与表单输入一致
- [ ] 文件上传后，文件信息正确保存